<template>
    <div class="app-container editcss">
        <el-row :gutter="0" class="el-card is-always-shadow el-card__body  card_contents" style="padding: 0px;">
            <el-col>
                <el-row class="content_h">
                    <el-col class="title_tops">
                        <div class="title_tops_t">
                            <div class="title_top_E">Protocol Management</div>
                            <div class="title_top_C">服务项目设置</div>
                        </div>
                    </el-col>
                    <el-col class="screen_case">
                        <el-row>
                            <el-col :span="4">
                                <div class="screen_case_amount ">
                                    <span class="screen_case_amount_lable">地域数量：</span>
                                    <span class="screen_case_amount_value">{{ totality }}</span>
                                </div>
                                <construction title="新建地域" @addition="additions" class="ml0 mt20" />
                            </el-col>
                            <el-col :span="20" style="display: flex;align-items: center;">
                                <el-button class="editbtn " type="text" size="small" @click="defaultClick">
                                    <img src="../../assets/iconfont/edit.png" alt="">
                                    默认地域设置</el-button>
                                <screenSelect title="地域筛选" type='select' v-model="screenFrom.provinceId"
                                    :isValue='screenFrom.provinceId' placeholder="请选择省"
                                    @transfer="valueHeldS($event, 'provinceId')" :options="ProvinceList"
                                    class="shaixuan mr10" />
                                <screenSelect title=" " type='select' v-model="screenFrom.cityId"
                                    :isValue='screenFrom.cityId' placeholder="请选择市" @transfer="valueHeldS($event, 'cityId')"
                                    :options="CityList" position="top" width='' class="mr10" />
                                <screenSelect title=" " type='select' v-model="screenFrom.areaId"
                                    :isValue='screenFrom.areaId' placeholder="请选择区" @transfer="valueHeldS($event, 'areaId')"
                                    :options="AreaList" position="top" width='' class="mr10" />
                                <el-button type="primary" class="ch_button " @click="search">
                                    <img class="ch_button_img" src="../../assets/iconfont/zoom-out.png" alt="" srcset="">
                                    <div>搜索</div>
                                </el-button>
                                <el-button type="primary" class="ch_button " @click="reset">
                                    <img class="ch_button_img" src="../../assets/iconfont/rotate-ccw.png" alt="" srcset="">
                                    <div>选项重置</div>
                                </el-button>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
            </el-col>
            <el-col class="dialog_title_ch_conter_operate  card_contents_tex">
                <el-table :data="tableData" fit style="width: 100%" header-row-class-name="hrcn" row-class-name="rcn">
                    <el-table-column type="index" align="center" label="序号" width="130">
                    </el-table-column>
                    <el-table-column align="" label="地域名称">
                        <template slot-scope="scope">
                            {{ scope.row.regionName }}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="创建时间" width="337">
                        <template slot-scope="scope">
                            {{ parseTime(scope.row.createTime, '{y}.{m}.{d}') }}
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" align="center" label="操作" width="240">
                        <template slot-scope="scope">
                            <el-button class="editbtn mr15" type="text" size="small" @click="editClick(scope.row)">
                                <img src="../../assets/iconfont/edit.png" alt="">
                                地域编辑</el-button>
                            <el-button class="editbtn" type="text" size="small" @click="editServeClick(scope.row)">
                                <img src="../../assets/iconfont/edit.png" alt="">
                                服务项目编辑</el-button>
                            <!-- <el-button class="delbtn" type="text" size="small" @click="delClick(scope.row)">
                  <img src="../../assets/iconfont/icondel.png" alt="">
                  删除</el-button> -->
                        </template>
                    </el-table-column>
                </el-table>
                <div class="paginationblock" v-if="totality > 0">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="pageData.pageNo" :page-sizes="[10, 20, 30, 40]" :page-size="pageData.pageSize"
                        :background="true" layout="total, sizes, prev, pager, next, jumper" :total="totality">
                    </el-pagination>
                </div>
            </el-col>
            <!-- <el-col class="card_contents_footer">
          <el-button type="primary" class="ch_button_seav" @click="tabGo">
            <img class="ch_button_img_seav" src="../../assets/iconfont/icon-seavicon.png" alt="" srcset="">
            <div>提交</div>
          </el-button>
        </el-col> -->
        </el-row>

        <!-- 新增 编辑 -->
        <el-dialog :visible.sync="addDialogVisible" custom-class="addeteDialog" :modal='true'>
            <div slot="title">
                <span class="title_top_E">{{ addFrom.id ? 'Edit' : 'New' }} Authority Management</span>
                <span class="title_top_C">{{ addFrom.id ? '编辑' : '新建' }}地域</span>
            </div>
            <div class="addeteDialog_conter">
                <div class="top_content">
                    <div class="condf_title">请选择需要{{ addFrom.id ? '编辑' : '新建' }}的地域</div>
                    <el-row :gutter="20" class="condf">
                        <el-col class="condf_z">
                            <screenSelect title="" type='select' v-model="addFrom.provinceId" :isValue='addFrom.provinceId'
                                placeholder="请选择省" @transfer="valueHeld($event, 'provinceId')" class="mr0"
                                :options="ProvinceList" width="156px" />
                        </el-col>
                        <el-col class="condf_z">
                            <screenSelect title=" " type='select' v-model="addFrom.cityId" :isValue='addFrom.cityId'
                                placeholder="请选择市" @transfer="valueHeld($event, 'cityId')" class="mr0" :options="CityList"
                                position="top" width='127px' />
                        </el-col>
                        <el-col class="condf_z">
                            <screenSelect title=" " type='select' v-model="addFrom.areaId" :isValue='addFrom.areaId'
                                placeholder="请选择区" @transfer="valueHeld($event, 'areaId')" class="mr0" :options="AreaList"
                                position="top" width='127px' />
                        </el-col>
                    </el-row>
                    <!-- <div style="width: 50%;">
                        <screenSelect title="请选择结算单位" type='select' v-model="addFrom.settlementMethod"
                            :isValue='addFrom.settlementMethod' placeholder="请选择"
                            @transfer="valueHeld($event, 'settlementMethod')" class="mr0 mt20"
                            :options="settlementMethodList" />
                    </div> -->
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="danger" @click="addsubmit">确认</el-button>
                <el-button type="primary" @click="addDialogVisible = false">取消</el-button>
            </span>
        </el-dialog>
        <!-- 删除 -->
        <el-dialog title="提示" :visible.sync="delDialogVisible" custom-class="deleteDialog" :show-close='false'
            :modal='true'>
            <span class="deleteDialogSpanconter">您确认要删除此职位权限？</span>
            <span slot="footer" class="dialog-footer">
                <el-button type="danger" @click="delHeld">确认删除</el-button>
                <el-button type="primary" @click="delDialogVisible = false">取消</el-button>
            </span>
        </el-dialog>


        <!-- 新增 编辑 -->
        <el-dialog :visible.sync="addServeDialogVisible" custom-class="addserveeteDialog" :modal='true'
            :before-close="handleClose">
            <div slot="title">
                <span class="title_top_E">Edit Protocol</span>
                <span class="title_top_C">{{ inittype == 0 ? '默认地域设置' : '服务项目编辑' }}</span>
            </div>
            <div class="tabbar_nav">
                <div class="tabbar_nav_item" :class="indexAC == index ? 'active_nav' : ''" v-for="(item, index) in navList"
                    :key="index" @click="navitHeld(index)">
                    <div>
                        <span v-if="!item.isedit">{{ item.name }}</span>
                        <el-input class="iseditInp" v-focus v-else v-model="item.name" placeholder="请输入内容"
                            @blur.stop="blurHeld(item)"></el-input>
                    </div>
                    <img src="../../assets/iconfont/iconavbianji.png" alt="" v-if="indexAC == index"
                        @click.stop="navEdit(item)">
                    <img src="../../assets/iconfont/iconbianji.png" alt="" v-else>
                </div>

            </div>
            <div class="addeteDialog_conter" v-loading="loading" element-loading-text="Loading...">
                <div class="top_content">
                    <div class="editHeld_conter_left">
                        <el-upload class="avatar-uploader" :show-file-list="false" action="/app/img/up"
                            :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                            <div v-if="serveFrom.servicesAvatarUrl" class="avatar">
                                <img :src="serveFrom.servicesAvatarUrl">
                                <div>点击更换</div>
                            </div>
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            <div slot="tip" class="el-upload__tip">建议尺寸：800*800px</div>
                            <div slot="tip" class="unten" v-if="isFroms.servicesAvatarUrl">请上传图片</div>

                        </el-upload>
                        <screenSelect class="conter_left_select" title="科室显示" type='select' v-model="serveFrom.isView"
                            :isValue='serveFrom.isView' placeholder="请选择" @transfer="valueHeldV($event, 'isView')"
                            width='103px' :options="options" />
                        <div class="unten" v-if="isFroms.isView">请选择科室是否显示</div>
                    </div>
                    <div class="editHeld_conter_right">
                        <screenSelect title="服务项目标题：" type='input' v-model="serveFrom.servicesTitle"
                            :isValue='serveFrom.servicesTitle' placeholder="请输入服务项目标题（12字）"
                            @transfer="valueHeldV($event, 'servicesTitle')" width='100%' position="top" />
                        <div class="unten" v-if="isFroms.servicesTitle">请输入服务项目标题（12字）</div>

                        <!-- <screenSelect title="服务项目内容：" type='textarea' v-model="serveFrom.servicesContent"
                            :isValue='serveFrom.servicesContent' placeholder="请输入服务项目内容"
                            @transfer="valueHeldV($event, 'servicesContent')" width='100%' position="top" /> -->
                            <div class="mb10 mt10 acon">服务项目内容：</div>
            <Toolbar ref="editorL" style="border-bottom: 1px solid #ccc" :editor="editor" :default-config="toolbarConfig"
              :mode="mode" />
            <Editor v-model="serveFrom.servicesContent" style="height: 200px; overflow-y: hidden;width: 100%;border: 1px solid #EFEFEF;border-top: none;"
              :default-config="editorConfig" :mode="mode" @onCreated="onCreated" @onBlur="onBlur" />
                        <div class="unten" v-if="isFroms.servicesContent">请输入服务项目内容</div>

                        <div class="content_checkbox">
                            <!-- <div class="title_che">平台后台权限模块：</div> -->
                            <div class="authority" v-for="(item, index) in checkDataL" :key="index">
                                <el-checkbox :indeterminate="item.indeterminate" v-model="item.checkAll"
                                    @change="handleCheckAllChange($event, item)">
                                    <div class="title_che" v-if="!isFroms.treatmentIdList">{{ item.title }}</div>
                                    <div class="unten" v-else>{{ item.title }}请选择治疗项目</div>
                                </el-checkbox>

                                <div style="margin: 15px 0;"></div>
                                <el-checkbox-group v-model="serveFrom.treatmentIdList" @change="handleCheckedCitiesChange">
                                    <el-checkbox v-for="(v, i) in item.child" :key="i" :label="v.treatmentId">{{
                                        v.treatmentName
                                    }}</el-checkbox>
                                </el-checkbox-group>
                            </div>
                        </div>
                        <div class="sertitle">
                            <span class="title_che">项目分类</span>
                            <construction title="增加分类（最多3类）" @addition="increase" />
                        </div>
                        <el-table :data="filterFun(serviceDetailList)" border style="width: 100%"
                            header-row-class-name="hrcns" row-class-name="rcns">
                            <el-table-column label="项目天数" align="center">
                                <template slot-scope="scope">
                                    <el-input class="tableinput" type="number"
                                        :class="funINput(scope.row.projectOfDays) ? 'csinp' : ''" placeholder="请输入"
                                        v-model="scope.row.projectOfDays" @input="tableinputHeld"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="每日治疗时长" align="center">
                                <template slot-scope="scope">
                                    <el-input class="tableinput" type="number"
                                        :class="funINput(scope.row.treatmentOfDays) ? 'csinp' : ''" placeholder="请输入"
                                        v-model="scope.row.treatmentOfDays" @input="tableinputHeld"></el-input>
                                </template>
                            </el-table-column>
                            <!-- <el-table-column :label="'设备服务费（' + (serveFrom.settlementMethod == 0 ? '小时' : '每天') + '）'"
                                align="center"> -->
                                <el-table-column :label="'设备服务费（每天）'"
                                    align="center">
                                <template slot-scope="scope">
                                    <el-input class="tableinput" type="number"
                                        :class="funINput(scope.row.equipmentServiceFee) ? 'csinp' : ''" placeholder="请输入"
                                        v-model="scope.row.equipmentServiceFee" @input="tableinputHeld"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="设备押金" align="center">
                                <template slot-scope="scope">
                                    <el-input class="tableinput" type="number"
                                        :class="funINput(scope.row.equipmentDeposit) ? 'csinp' : ''" placeholder="请输入"
                                        v-model="scope.row.equipmentDeposit" @input="tableinputHeld"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="设备耗材费用" align="center">
                                <template slot-scope="scope">
                                    <el-input class="tableinput" type="number"
                                        :class="funINput(scope.row.equipmentConsumablesCost) ? 'csinp' : ''"
                                        placeholder="请输入" v-model="scope.row.equipmentConsumablesCost"
                                        @input="tableinputHeld"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" align="center">
                                <template slot-scope="scope" v-if="filterFun(serviceDetailList).length > 1">
                                    <el-button class="delbtn" type="text" size="small" style="margin-left: 0;"
                                        @click="delrowClick(scope.row)">
                                        删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <div class="footer_submit">
                    <el-button type="primary" class="ch_button_seav" @click="addserve" :disabled="isDisabled">
                        <img class="ch_button_img_seav" src="../../assets/iconfont/icon-seavicon.png" alt="" srcset="">
                        <div>提交</div>
                    </el-button>
                </div>
            </div>
            <el-dialog width="30%" title="提示" :visible.sync="innerVisible" custom-class="deleteDialog" append-to-body
                :before-close="innerVisibleCancel">
                <span class="deleteDialogSpanconter" v-if="indexAC < 2">{{ navList[indexAC].name + '保存成功，是否填写' +
                    navList[indexAC + 1].name + '?' }}</span>
                <span slot="footer" class="dialog-footer">
                    <el-button type="danger" @click="innerVisibleHeld">确 定</el-button>
                    <el-button type="primary" @click="innerVisibleCancel">取 消</el-button>
                </span>
            </el-dialog>
            <el-dialog width="30%" title="提示" :visible.sync="UnsaveDialogVisible" custom-class="deleteDialog"
                append-to-body>
                <span class="deleteDialogSpanconter">{{ navList[indexAC].name + '未保存，是否关闭?' }}</span>
                <span slot="footer" class="dialog-footer">
                    <el-button type="danger" @click="UnsaveHeld">确 定</el-button>
                    <el-button type="primary" @click="UnsaveDialogVisible = false">取 消</el-button>
                </span>
            </el-dialog>
        </el-dialog>
    </div>
</template>

<script>
import construction from '@/components/construction/index.vue'
import screenSelect from '@/components/screenSelect/index.vue'
import { getProvince, getCity, getArea, getTreatmentList } from '@/api/common'
import { getRegionAdd, getServicesAdd,getNameList, getRegionUpdate, getRegionDetail, getRegionDelete, getRegionList, getRegionPageList, getServicesDetail } from '@/api/servicesavailable'
import {upImg} from '@/api/user'
import {
    Editor,
    Toolbar
  } from '@wangeditor/editor-for-vue'
  import '@wangeditor/editor/dist/css/style.css'
import {
    mapGetters
} from 'vuex'
export default {
    name: "Field",
    components: {
        construction,
        screenSelect,
        Editor,
        Toolbar
    },
    computed: {
        ...mapGetters([
            'permissionList'
        ])
    },
    watch: {
        'addFrom.provinceId': {
            handler(newVal, oldVal) {
                if (newVal) {
                    this.getCity()
                }
            }
        },
        'addFrom.cityId': {
            handler(newVal, oldVal) {
                if (newVal) {
                    this.getArea()
                }
            }
        },
        'screenFrom.provinceId': {
            handler(newVal, oldVal) {
                if (newVal) {
                    this.getCityS()
                }
            }
        },
        'screenFrom.cityId': {
            handler(newVal, oldVal) {
                if (newVal) {
                    this.getAreaS()
                }
            }
        },
    },
    data() {
        return {
            isUnsave: false,
            isDisabled: false,
            UnsaveDialogVisible: false,
            loading: true,
            delDialogVisible: false,
            addDialogVisible: false,
            addServeDialogVisible: false,
            innerVisible: false,
            institutionName: '',
            provinceName: '',
            inittype: 0,
            fromDatas: {

            },
            navList: [
                {
                    id: 0,
                    name: '产后康复',
                    isedit: false
                },
                {
                    id: 1,
                    name: '计生术后',
                    isedit: false
                },
                {
                    id: 2,
                    name: '乳腺',
                    isedit: false
                },
            ],
            checkDataL: [
                {
                    id: 1,
                    title: '治疗项目：',
                    checkAll: false,
                    indeterminate: false,
                    child: [
                    ]
                },
                // {
                //     id: 1,
                //     title: '用户中心',
                //     checkAll: false,
                //     indeterminate: false,
                //     child: [
                //         {
                //             value: '1',
                //             lable: '机构管理'
                //         },
                //         {
                //             value: '2',
                //             lable: '部门管理'
                //         },
                //         {
                //             value: '3',
                //             lable: '员工管理'
                //         },
                //         {
                //             value: '4',
                //             lable: '统计权限管理'
                //         }
                //     ]
                // },
                // {
                //     id: 2,
                //     title: '内容中心',
                //     checkAll: false,
                //     indeterminate: false,
                //     child: [
                //         {
                //             value: '5',
                //             lable: '常见问题'
                //         },
                //         {
                //             value: '6',
                //             lable: '说明书'
                //         },
                //         {
                //             value: '7',
                //             lable: '协议管理'
                //         }
                //     ]
                // },
                // {
                //     id: 3,
                //     title: '订单中心',
                //     checkAll: false,
                //     indeterminate: false,
                //     child: [
                //         {
                //             value: '8',
                //             lable: '订单中心'
                //         }
                //     ]
                // },
                // {
                //     id: 4,
                //     title: '设备管理',
                //     checkAll: false,
                //     indeterminate: false,
                //     child: [
                //         {
                //             value: '9',
                //             lable: '设备管理'
                //         },
                //     ]
                // },
                // {
                //     id: 5,
                //     title: '财务结算',
                //     checkAll: false,
                //     indeterminate: false,
                //     child: [
                //         {
                //             value: '10',
                //             lable: '时间订单结算'
                //         },
                //         {
                //             value: '11',
                //             lable: '项目订单结算'
                //         },
                //     ]
                // },
            ],
            options: [{
                value: 0,
                label: '否'
            }, {
                value: 1,
                label: '是'
            }],
            imageUrl: '',
            tableData: [],
            serviceDetailList: [
                {
                    projectOfDays: '',
                    treatmentOfDays: '',
                    equipmentServiceFee: '',
                    equipmentDeposit: '',
                    equipmentConsumablesCost: '',
                    rowNum: 1,
                    isDeleted: 0
                },
            ],
            rowNum: 1,
            indexAC: 0,
            totality: 0,//总数
            ProvinceList: [],
            CityList: [],
            AreaList: [],
            settlementMethodList: [
                {
                    value: 0,
                    label: '小时'
                },
                {
                    value: 1,
                    label: '天'
                }
            ],
            serveFrom: {
                treatmentIdList: [],
                isDefault: 0,
            },
            addFrom: {
                provinceId: '',
                cityId: '',
                areaId: '',
            },
            screenFrom: {
                provinceId: '',
                cityId: '',
                areaId: '',
            },
            pageData: {
                pageNo: 1,
                pageSize: 10
            },
            isFroms: {
                servicesTitle: false,
                servicesContent: false,
                isView: false,
                treatmentIdList: false,
                serviceDetailList: false,
                servicesAvatarUrl: false
            },
      editor: null,
      toolbarConfig: {
        excludeKeys: ['group-video', 'insertImage']
      },
      editorConfig: {
        placeholder: '请输入内容...',

        MENU_CONF: {
          //配置上传图片
          uploadImage: {
            customUpload: this.uploadImg
          }
        }

      },
      mode: 'default',
        };
    },
    mounted() {
        console.log(this.$route);
        this.getList()
        this.getTableList()
        this.getTreList()
    },
    beforeDestroy() {
        const editor = this.editor;
        if (editor == null) return;
        editor.destroy();
      },
    methods: {
        onCreated(editor) {
      this.editor = Object.seal(editor)
    },
    onBlur(editor) {
      this.addFrom.questionContent = editor.getHtml()
    },
    // 上传图片
    uploadImg(file, insertFn) {
      let imgData = new FormData();
      imgData.append('file', file);
      console.log(file);
      // 调用上传图片接口，上传图片  我这里testUpImg是测试接口
      upImg(imgData).then(response => {
        console.log(response);
        if (response.code == 200) {
          //插入后端返回的url
          insertFn(response.data.imgUrl);
        } else {}
      })
    },
        funINput(data) {
            if (this.isFroms.serviceDetailList) {
                if (data == '') {
                    return true
                } else {
                    return false
                }
            } else {
                return false
            }
        },
        tableinputHeld() {
            this.isUnsave = true
            this.isFroms.serviceDetailList = false
        },
        filterFun(data) {
            let arr = []
            data.map(item => {
                if (item.isDeleted == 0) {
                    arr.push(item)
                }
            })
            return arr
        },
        getList() {
            getProvince().then(res => {
                if (res.code == 200) {
                    res.data.provinceList.map(item => {
                        item.label = item.name
                        item.value = item.id
                    })
                    this.ProvinceList = res.data.provinceList
                }
            })
        },
        getTableList(data) {
            let newdata = {}
            if (data) {
                newdata = data
            } else {
                newdata = this.addFrom
            }
            let that = this
            const loading = that.$loading({
                lock: true,
                text: 'Loading...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            getRegionPageList(newdata, this.pageData).then(res => {
                if (res.code == 200) {
                    this.tableData = res.data.regionPage.records
                    this.totality = res.data.regionPage.total
                    loading.close()
                }
            })
        },
        getTreList() {
            getTreatmentList().then(res => {
                if (res.code == 200) {
                    this.checkDataL[0].child = res.data.regionList
                }
            })
            console.log(this.checkDataL);
        },
        getCity() {
            getCity(this.addFrom.provinceId).then(res => {
                if (res.code == 200) {
                    res.data.cityList.map(item => {
                        item.label = item.name
                        item.value = item.id
                    })
                    this.CityList = res.data.cityList
                    if (!this.CityList.some(x => { return x.id == this.addFrom.cityId })) {
                        this.addFrom.cityId = ''
                        this.addFrom.areaId = ''
                    }
                }
            })
        },

        getArea() {
            getArea(this.addFrom.cityId).then(res => {
                if (res.code == 200) {
                    res.data.areaList.map(item => {
                        item.label = item.name
                        item.value = item.id
                    })
                    this.AreaList = res.data.areaList
                    if (!this.AreaList.some(x => { return x.id == this.addFrom.areaId })) {
                        this.addFrom.areaId = ''
                    }
                }
            })
        },
        getCityS() {
            getCity(this.screenFrom.provinceId).then(res => {
                if (res.code == 200) {
                    res.data.cityList.map(item => {
                        item.label = item.name
                        item.value = item.id
                    })
                    this.CityList = res.data.cityList
                    if (!this.CityList.some(x => { return x.id == this.screenFrom.cityId })) {
                        this.screenFrom.cityId = ''
                        this.screenFrom.areaId = ''
                    }
                }
            })
        },
        getAreaS() {
            getArea(this.screenFrom.cityId).then(res => {
                if (res.code == 200) {
                    res.data.areaList.map(item => {
                        item.label = item.name
                        item.value = item.id
                    })
                    this.AreaList = res.data.areaList
                    if (!this.AreaList.some(x => { return x.id == this.screenFrom.areaId })) {
                        this.screenFrom.areaId = ''
                    }
                }
            })
        },
        getName(){
          getNameList().then(res=>{
            console.log(res);
          })
        },
        handleSizeChange(val) {
            this.pageData.pageSize = val
            this.getTableList()
        },
        handleCurrentChange(val) {
            this.pageData.pageNo = val
            this.getTableList()
        },
        navEdit(val) {
            val.isedit = true
            console.log('编辑', val);
        },
        blurHeld(val) {
            val.isedit = false
            this.serveFrom.name = val.name
        },
        focusHeld(val) {
            val.isedit = false
        },
        navitHeld(i) {
            if (this.indexAC == i) {
                return
            }
            this.isFroms = {
                servicesTitle: false,
                servicesContent: false,
                isView: false,
                treatmentIdList: false,
                serviceDetailList: false,
                servicesAvatarUrl: false
            }
            if (this.isUnsave) {
                this.UnsaveDialogVisible = true
                return
            }
            this.indexAC = i
            this.commonFun()
            if (this.innerVisible) {
                this.innerVisible = false
            }

        },

        innerVisibleHeld() {
            if (this.indexAC < 2) {
                this.navitHeld(this.indexAC + 1)
            }
        },
        UnsaveHeld() {
			this.isUnsave = false
            this.UnsaveDialogVisible = false
            this.addServeDialogVisible = false
        },
        innerVisibleCancel() {
            this.innerVisible = false
            this.addServeDialogVisible = false
        },
        readonlyChange(row) {
            let bool = false
            if (this.serviceDetailList.length > 1) {
                bool = false
            } else {
                bool = true
            }
            // if (row.id) {
            //     if (this.serviceDetailList[0].id == row.id) {
            //         bool = true
            //     } else {
            //         bool = false
            //     }
            // } else {
            //     bool = false
            // }
            return bool
        },
        noRepeat(arr) {
            var newArr = [...new Set(arr)];
            return newArr
        },
        handleCheckAllChange(val, item) {
            console.log(val, item);
            this.isFroms.treatmentIdList = false
            if (val) {
                item.child.map(v => {
                    this.serveFrom.treatmentIdList.push(v.treatmentId)
                })
                item.indeterminate = false
            } else {
                item.child.map(v => {
                    this.serveFrom.treatmentIdList = this.serveFrom.treatmentIdList.filter(vit => { return vit != v.treatmentId })
                })
                item.indeterminate = false
            }
            this.serveFrom.treatmentIdList = this.noRepeat(this.serveFrom.treatmentIdList)
        },
        handleCheckedCitiesChange(value) {
            this.isFroms.treatmentIdList = false
            this.isUnsave = true
            this.checkDataL.map(item => {
                if (item.child.length > 0) {
                    let arr = []
                    item.child.map(v => {
                        if (value.indexOf(v.treatmentId) != -1) {
                            arr.push(v.treatmentId)
                        }
                    })
                    if (arr.length > 0) {
                        item.indeterminate = true
                    } else {
                        item.indeterminate = false
                    }
                    if (arr.length == item.child.length) {
                        item.checkAll = true
                        item.indeterminate = false
                    } else {
                        item.checkAll = false
                    }
                }
            })
        },
        valueHeld(childParam, fatherparam) {
            this.addFrom[fatherparam] = childParam
        },
        valueHeldS(childParam, fatherparam) {
            this.screenFrom[fatherparam] = childParam
        },
        valueHeldV(childParam, fatherparam) {
            this.isUnsave = true
            this.serveFrom[fatherparam] = childParam
            this.isFroms[fatherparam] = false
        },
        search() {
            this.pageData={
					pageNo: 1,
					pageSize: 10
				}
            this.getTableList(this.screenFrom)
        },
        reset() {
            this.screenFrom = {
                provinceId: '',
                cityId: '',
                areaId: '',
            }
            this.getTableList()
        },
        handleClose() {
            if (this.isUnsave) {
                this.UnsaveDialogVisible = true
            } else {
                this.addServeDialogVisible = false
            }
        },
        defaultClick() {
            this.isFroms = {
                servicesTitle: false,
                servicesContent: false,
                isView: false,
                treatmentIdList: false,
                serviceDetailList: false,
                servicesAvatarUrl: false
            }
            this.indexAC = 0
            this.inittype = 0
            this.serveFrom.isDefault = 1
            this.commonFun()
            this.addServeDialogVisible = true
        },
        delClick(row) {
            this.delDialogVisible = true
            console.log(row);
        },
        // 确认删除
        delHeld() {
            this.delDialogVisible = false
            this.$Toast('删除成功')
        },
        //项目分类删除
        delrowClick(row) {
            console.log(row, this.serviceDetailList);
            this.isUnsave = true
            if (row.rowNum) {
                this.serviceDetailList.map((item, index) => {
                    if (item.rowNum) {
                        if (item.rowNum == row.rowNum) {
                            console.log(index);
                            this.serviceDetailList.splice(index, 1)
                        }
                    }
                })
            }
            if (row.serviceDetailId) {
                this.serviceDetailList.map((item, index) => {
                    if (item.serviceDetailId == row.serviceDetailId) {
                        console.log(index);
                        item.isDeleted = 1
                    }
                })
            }
        },
        editClick(row) {
            this.addFrom = row
            this.addDialogVisible = true
        },
        editServeClick(row) {
            this.isFroms = {
                servicesTitle: false,
                servicesContent: false,
                isView: false,
                treatmentIdList: false,
                serviceDetailList: false,
                servicesAvatarUrl: false
            }
            this.indexAC = 0
            this.inittype = row.regionId
            this.serveFrom.isDefault = 0
            this.commonFun()
            this.addServeDialogVisible = true
        },
        commonFun() {
            this.loading = true
            let newData = {
                isDefault: this.serveFrom.isDefault,
                regionId: this.inittype == 0 ? null : this.inittype,
                type: this.indexAC
            }
            getNameList(newData).then(res=>{
              if(res.code==200){
              res.data.itemsNames.map(item=>{
                item.isedit = false
              })
              this.navList = res.data.itemsNames
              getServicesDetail(newData).then(res => {
                  if (res.code == 200) {
                      if (res.data.servicesItem != null) {
                          this.serviceDetailList = res.data.servicesItem.serviceDetailList
                          if (res.data.servicesItem.treatmentIdList.length == this.checkDataL[0].child.length) {
                              this.checkDataL[0].checkAll = true
                              this.checkDataL[0].indeterminate = false

                          } else {
                              this.checkDataL[0].indeterminate = true
                              this.checkDataL[0].checkAll = false
                          }
                          this.serveFrom = res.data.servicesItem
                      } else {
                          this.serveFrom = {
                              treatmentIdList: [],
                              isDefault: this.serveFrom.isDefault,
                          }
                          this.serviceDetailList = [
                              {
                                  projectOfDays: '',
                                  treatmentOfDays: '',
                                  equipmentServiceFee: '',
                                  equipmentDeposit: '',
                                  equipmentConsumablesCost: '',
                                  rowNum: 1,
                                  isDeleted: 0
                              },
                          ]
                          this.checkDataL[0].checkAll = false
                          this.checkDataL[0].indeterminate = false
                      }
                  }
                  this.loading = false
                  // this.addServeDialogVisible = true

              })
              }
            })

        },
        additions(e) {
            this.addFrom = {
                provinceId: '',
                cityId: '',
                areaId: '',
            }
            this.serveFrom.treatmentIdList = []
            this.addDialogVisible = e
        },
        increase(e) {
            if (this.filterFun(this.serviceDetailList).length == 3) {
                this.$Toast('最多只能存在三类')
                return
            }
            let addItem = {
                projectOfDays: '',
                treatmentOfDays: '',
                equipmentServiceFee: '',
                equipmentDeposit: '',
                equipmentConsumablesCost: '',
                isDeleted: 0,
                rowNum: this.rowNum
            }
            this.rowNum += 1
            this.serviceDetailList.push(addItem)
        },
        // 提交
        addsubmit() {
            getRegionAdd(this.addFrom).then(res => {
                if (res.code == 200) {
                    this.$Toast('操作成功')
                    this.addFrom = {
                        provinceId: '',
                        cityId: '',
                        areaId: '',
                    }
                    this.getTableList()
                    this.addDialogVisible = false
                }else{
                  this.$Toast(res.message)
                }
            })
            // 成功之后情况编辑
            // this.fromDatas = {}
        },
        //提交服务
        addserve() {
            if (this.serveFrom.isView == 0 || this.serveFrom.isView == 1) {
                this.isFroms.isView = false
            } else {
                this.isFroms.isView = true
            }
            if (!this.serveFrom.servicesTitle) {
                this.isFroms.servicesTitle = true
            } else {
                this.isFroms.servicesTitle = false
            }
            if (!this.serveFrom.servicesContent) {
                this.isFroms.servicesContent = true
            } else {
                this.isFroms.servicesContent = false
            }
            // if(!this.serveFrom.servicesAvatarUrl){
            //     this.isFroms.servicesAvatarUrl = true
            // }else{
            //     this.isFroms.servicesAvatarUrl = false
            // }
            if (this.serveFrom.treatmentIdList.length == 0) {
                this.isFroms.treatmentIdList = true
            } else {
                this.isFroms.treatmentIdList = false
            }
            this.serveFrom.serviceDetailList = this.filterFun(this.serviceDetailList)
            if (this.serveFrom.serviceDetailList.length == 0) {
                return false
            }
            console.log(this.serveFrom.serviceDetailList);
            this.serveFrom.serviceDetailList.map(item => {
                for (let key in item) {
                    if (item[key] === '' && key != 'rowNum' && key != 'isDeleted' && key != 'totalPrice') {
                        console.log(key, '=======', item[key]);
                        this.isFroms.serviceDetailList = true
                        return false
                    } else {
                        this.isFroms.serviceDetailList = false
                    }
                }
            })
            for (let key in this.isFroms) {
                if (this.isFroms[key]) {
                    return false
                }
            }
            this.isDisabled = true
            // this.serveFrom.serviceDetailList = this.serviceDetailList
            if (this.serveFrom.isDefault == 0) {
                this.serveFrom.regionId = this.inittype
            } else {
                this.serveFrom.regionId = null

            }
            this.serveFrom.type = this.indexAC
            if(!this.serveFrom.name){
              this.serveFrom.name = this.navList[this.indexAC].name
            }
            getServicesAdd(this.serveFrom).then(res => {
                if (res.code == 200) {
                    this.isDisabled = false
                    if (this.indexAC < 2) {
                        this.innerVisible = true
                    } else {
                        this.$Toast('操作成功')
                        this.addServeDialogVisible = false
                    }
                    this.isUnsave = false
                }else{
                  this.$Toast(res.message)
                }
            })
        },
        handleAvatarSuccess(res, file) {
            // this.imageUrl = URL.createObjectURL(file.raw);
            if (res.code == 200) {
                this.serveFrom.servicesAvatarUrl = res.data.imgUrl
            }
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        }
    }
}
</script>

<style lang="scss" scoped>
::v-deep .hrcns th {
    background-color: #FFFFFF;
    color: #989898;
    font-size: 15px;
    font-weight: 400;
}

::v-deep .rcns {
    color: #989898;
    font-size: 13px;
    font-weight: 400;
}

::v-deep .hrcn th {
    background-color: #FFFFFF;
    color: #989898;
    font-size: 15px;
    font-weight: 400;
}

::v-deep .hrcn th .cell {
    border-right: 1px solid #EFEFEF;
}

::v-deep .hrcn th:last-child .cell {
    border-right: none;
}

::v-deep .rcn {
    color: #000;
    font-size: 16px;
    font-weight: 400;
}

::v-deep .rcn td:nth-last-child(1) {
    border-left: 1px solid #EFEFEF;
}

.card_contents {
    height: calc(100% - 1px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .card_contents_tex {
        flex: 1;
        overflow-y: auto;
        margin-bottom: 20px;
    }

    .card_contents_footer {
        padding: 16px 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-top: 1px solid #EFEFEF;
    }
}

.content_h {
    min-height: 149px;
    border-radius: 5px;
    padding: 0px;
    border-bottom: 1px solid #EFEFEF;
}

.title_tops {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 20px;
    min-height: 79px;
    border-bottom: 1px solid #EFEFEF;

    .title_tops_t {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .title_tops_b {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 28px;
        cursor: pointer;

        img {
            width: 24px;
            height: 24px;
            margin-right: 5px;
        }

        span {
            font-size: 16px;
            font-weight: 400;
            color: #000;
        }
    }
}

.screen_case_title {
    font-size: 16px;
    font-weight: 400;
    color: #000;
    margin-right: 35px;
}

.title_top_E {
    font-size: 12px;
    font-weight: 400;
    color: #9898989E;
}

.title_top_C {
    font-size: 18px;
    font-weight: 400;
    color: #000;
}

.screen_case {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 15px 30px;
}

.screen_case_amount {
    .screen_case_amount_lable {
        font-size: 15px;
        color: #989898;
    }

    .screen_case_amount_value {
        font-size: 16px;
        color: #000;
    }
}

::v-deep .el-button.ch_button {
    padding: 8px 9px;
}

::v-deep .el-button.ch_button span {
    display: flex;
    align-items: center;

    div {
        font-size: 13px;
        font-weight: 400;
        margin-left: 4px;
    }
}

::v-deep .ch_button_seav {
    padding: 7px 27px;

    span {
        display: flex;
        align-items: center;
        justify-content: center;

        div {
            font-size: 16px;
            font-weight: 400;
            margin-left: 10px;
        }
    }
}

.ch_button_img_seav {
    width: 24px;
    height: 24px;
}

.dialog_title_ch_conter_operate {
    // padding: 24px 35px;
    // border: 1px solid #EBEBEB;
    border-radius: 2px;
    // display: flex;
    // align-items: center;
}

::v-deep .editbtn span,
::v-deep .delbtn span {
    display: flex;
    align-items: center;
    justify-content: center;
}

.editbtn,
.delbtn {
    img {
        width: 15px;
        height: 15px;
    }
}

.delbtn {
    color: #FE294D;
    margin-left: 57px;
}

.editbtn:active,
.delbtn:active {
    opacity: .6;
}

.el-dialog__wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

::v-deep .addserveeteDialog {
    background-color: #FFFFFF;
    min-width: 70%;
    max-width: 1268px;
    max-height: 764px;
    min-height: 300px;
    border-radius: 6px;
    box-shadow: 0 0 10px #60778E47;
    display: flex;
    flex-direction: column;
}

::v-deep .addserveeteDialog .el-dialog__body {
    padding: 0px 20px;

    .addeteDialog_conter {
        border: 1px solid #EFEFEF;
        flex: auto;
        display: flex;
        flex-direction: column;

        .top_content {
            flex: 1;
            min-height: 200px;
            max-height: 500px;
            overflow-y: auto;
            padding: 20px 23px;
            display: flex;
            // justify-content: space-around;

            .editHeld_conter_left {
                width: 230px;
                text-align: center;
                margin-right: 20px;
                display: flex;
                flex-direction: column;
                align-items: center;

                .conter_left_select {
                    width: 188px;
                    margin-top: 40px;
                }
            }

            .editHeld_conter_right {
                flex: auto;
                // .el-input__inner{
                //     border-color: red;
                // }
            }

            .content_checkbox {
                .title_che {
                    margin-top: 20px;
                    margin-bottom: 10px;
                    font-size: 15px;
                    font-weight: 400;
                    color: #989898;
                }

                .title_che_sup {
                    font-size: 13px;
                    font-weight: 400;
                    color: #414141;
                }

                .el-checkbox {
                    margin-top: 8px;
                }

            }
        }

        .footer_submit {
            display: flex;
            align-items: center;
            justify-content: center;
            border-top: 1px solid #EFEFEF;
            padding: 10px 0 15px 0;
        }
    }

}

::v-deep .editHeld_conter_left .avatar-uploader .el-upload {
    border: 1px solid #d9d9d9;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-align: center;
}

// ::v-deep  .avatar-uploader .el-upload:hover {
//   border-color: #409EFF;
// }
.editHeld_conter_left .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 160px;
    height: 160px;
    line-height: 160px;
    text-align: center;
}

.editHeld_conter_left .avatar {
    width: 160px;
    height: 160px;
    display: block;
    position: relative;

    img {
        width: 100%;
        height: 100%;
    }

    div {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #00000066;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: 400;
        color: #FFFFFFAA;
    }
}

//新增弹窗
::v-deep .addeteDialog {
    background-color: #FFFFFF;
    width: 552px;
    // height: 764px;
    border-radius: 6px;
    box-shadow: 0 0 10px #60778E47;
    display: flex;
    flex-direction: column;
}

::v-deep .addeteDialog .el-dialog__header,
::v-deep .addserveeteDialog .el-dialog__header {
    height: 80px;

    div {
        display: flex;
        flex-direction: column;
    }

    border-bottom: 1px solid #EFEFEF;

    // 自定义弹窗x号
    .el-dialog__close::before {
        content: ' ';
        background: url(../../assets/iconfont/x-circle.png);
        background-size: 20px 20px;
        width: 20px;
        height: 20px;
        display: flex;
    }

    .el-dialog__close:active::before {
        background: url(../../assets/iconfont/x-circleactive.png);
        background-size: 20px 20px;
    }
}

::v-deep .addeteDialog .el-dialog__body {
    padding: 17px 20px;

    .addeteDialog_conter {
        // border: 1px solid #EFEFEF;
        flex: auto;
        display: flex;
        flex-direction: column;

        .top_content {
            flex: 1;
            min-height: 200px;
            max-height: 580px;
            overflow-y: auto;
            padding: 20px 23px;

            .content_checkbox {
                .title_che {
                    margin-top: 20px;
                    margin-bottom: 10px;
                    font-size: 15px;
                    font-weight: 400;
                    color: #989898;
                }

                .title_che_sup {
                    font-size: 13px;
                    font-weight: 400;
                    color: #414141;
                }

                .el-checkbox {
                    margin-top: 8px;
                }

            }
        }
    }
}

::v-deep .addeteDialog .dialog-footer {
    display: flex;
    justify-content: center;
    align-items: center;

    button {
        width: 120px;
        height: 38px;
        border-radius: 1px;
        font-size: 16px;
        font-weight: 400;
        color: #FFFFFF;
        background-color: #0584FE;
        border-color: #0584FE;
    }

    button:active {
        opacity: .6;
    }

    button:nth-child(1) {
        margin-right: 32px;
    }
}

//删除弹窗
::v-deep .deleteDialog {
    background-color: #FFFFFF;
    width: 552px;
    height: 332px;
    border-radius: 6px;
    box-shadow: 0 0 10px #60778E47;
    display: flex;
    flex-direction: column;
}

::v-deep .deleteDialog .el-dialog__header {
    .el-dialog__title {
        color: #000;
        font-size: 18px;
        font-weight: 400;
    }

    border-bottom: 1px solid #EFEFEF;
    // 自定义弹窗x号
    // .el-dialog__close::before{
    //   content:' ';
    //   background: url(../../assets/iconfont/x-circle.png);
    //   background-size: 20px 20px;
    //   width: 20px;
    //   height: 20px;
    //   display: flex;
    // }
    // .el-dialog__close:active::before{
    //   background: url(../../assets/iconfont/x-circleactive.png);
    //   background-size: 20px 20px;
    // }
}

::v-deep .deleteDialogSpanconter {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 18px;
    font-weight: 400;
    color: #000;
}

::v-deep .deleteDialog .el-dialog__body {
    flex: 1;
}

.deleteDialog .dialog-footer {
    display: flex;
    justify-content: center;
    align-items: center;

    button {
        width: 120px;
        height: 38px;
        border-radius: 1px;
        font-size: 16px;
        font-weight: 400;
        color: #FFFFFF;
    }

    button:active {
        opacity: .6;
    }

    button:nth-child(1) {
        margin-right: 32px;
        background-color: #FE294D;
        border-color: #FE294D;
    }

    button:nth-child(2) {
        background-color: #0584FE;
        border-color: #0584FE;
    }
}

.authority {
    margin-bottom: 25px;
}

.condf_title {
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 17px;
    color: #000;
}

.condf {
    display: flex;
    align-items: center;
    justify-content: center;

    .condf_z {
        display: flex;
        align-items: center;
    }
}

::v-deep .tableinput .el-input__inner {
    border: none;
    text-align: center;
    color: #000;
    background-color: rgba(0, 0, 0, 0);
}

::v-deep .csinp .el-input__inner::placeholder {
    color: red !important;
}

::v-deep .tableinput input::-webkit-outer-spin-button,
::v-deep .tableinput input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
}

// ::v-deep .tableinput input[type="number"] {
//     -moz-appearance: textfield;
// }

.sertitle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 8px;
}

.tabbar_nav {
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tabbar_nav_item {
    cursor: pointer;
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #E8E8E8;
    color: #767676;
    font-size: 18px;
    padding: 12px 0;
    position: relative;

    img {
        width: 21px;
        height: 21px;
        position: absolute;
        right: 14px;
        top: 14px;
    }
}

.shaixuan {
    margin-left: 35px;
}

.active_nav {
    background: #0584FE;
    color: #FFFFFF;
}

::v-deep .iseditInp .el-input__inner {
    border: none;
    font-size: 18px;
    text-align: center;
    background-color: #FFF;
    color: #000;
    height: 100%;
}
.acon{
  background: none;
  padding: 0 0 6px 0;
  font-size: 15px;
  font-weight: 400;
  color: #989898;
}
</style>
